<template>
  <div>
    <Lines ref="subwayTopo"></Lines>
  </div>
</template>

<script>
import Lines from './lines/index.vue'
// import mock from './mock'
import mock from './mock20'
import { generateDataForLines } from './lines/utils/getNodeAndEdge'

export default {
  components: {
    Lines,
  },
  data() {
    return {
      lingDataLoading: false,
      topoData: null,
      linesData: null,
      routes: [],
    }
  },
  methods: {
    async getlineData() {
      this.lingDataLoading = true
      const data = mock
      const lines = {}

      data.traces.forEach((item) => {
        let { nodes, edges, serviceLineConfig } = item
        const lineNum = Number(serviceLineConfig.presetLine)
        nodes = nodes.map((node) => {
          const isAbnormal = node.alarmPriority
          let color = ''
          if (isAbnormal) {
            // const level = this.PRIORITY_LEVEL.find(item => item.priorityId === node.alarmPriority)
            color = '#F55F5F'
          }
          return {
            ...node,
            id: `line-${lineNum}-${node.cmdbId}`,
            label: node.systemName,
            isShowTooltip: node.iconType === 'app_service',
            color,
          }
        })
        edges = edges.map((edge) => {
          const isAbnormal = edge.alarmPriority
          const source = `line-${lineNum}-${edge.source}`
          const target = `line-${lineNum}-${edge.target}`
          let color = ''
          if (isAbnormal) {
            // const level = this.PRIORITY_LEVEL.find(item => item.priorityId === edge.alarmPriority)
            color = '#F55F5F'
          }
          return {
            ...edge,
            source,
            target,
            isAbnormal: true,
            hasAbnormal: true,
            isShowTooltip: edge.type !== 2,
            color,
          }
        })
        lines[serviceLineConfig.presetLine] = {
          nodes,
          edges,
          serviceLineConfig,
        }
        // 本地模拟20条
      })
      console.log(lines, 'lines')
      this.topoData = generateDataForLines(lines)
      this.linesData = lines

      // 确保数据完整性
      if (this.topoData && this.topoData.nodes && this.topoData.edges) {
        await this.$nextTick()
        this.$refs.subwayTopo.refreshData(this.topoData)
      } else {
        console.error('Topology data is incomplete:', this.topoData)
      }
    },
  },
  async mounted() {
    await this.$nextTick()
    this.getlineData()
  },
  created() {},
}
</script>
